<template>
    <div
        class="Schedule"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 班表 -->
        <box-group-wrap pageTitle="班表" :isShowData="isShowData">
            <template slot="wrapBody">
                <div class="working">
                    <div class="workTop">
                        <div class="worktopLeft">
                            <div class="workLeftItem">{{istitleDataMonth}}月</div>
                            <div class="workItemBottom">{{istitleDataDay}}</div>
                        </div>
                        <div class="worktopright">
                            <div class="worktoprightItem">
                                <p>
                                    <span>今天班次：</span>
                                    <span>{{isSelectedTPClass.typeClass}}班</span>
                                </p>
                            </div>
                            <div class="worktoprightItem">
                                <p>
                                    <span>上班时间：</span>
                                    <span>{{isSelectedTPClass.workingTime}}</span>
                                </p>
                            </div>
                            <div class="worktoprightItem">
                                <p>
                                    <span>休息时间：</span>
                                    <span>{{isSelectedTPClass.breakTime}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="workBottom">
                        <el-calendar ref="calendars">
                            <template slot="dateCell" slot-scope="{data}">
                                <div
                                    class="isdata"
                                    :class="data.isSelected?'is-selected':''"
                                    @click="selectedDay($event,data)"
                                >
                                    <span class="left">{{data.day.split('-').slice(2).join('-')}}</span>
                                    <span class="right">{{data.isSelected?"√":''}}</span>
                                </div>
                            </template>
                        </el-calendar>
                    </div>
                </div>
            </template>
        </box-group-wrap>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';

export default {
    name: 'Schedule',
    data() {
        return {
            isSelectedDate: '',//当前点击的时间数据
            istitleDataMonth: '',
            istitleDataDay: '',
            isShowData: false,
            pageLoading: true,
            month: '',
            dataList: [],//按月查询 当前坐席的班次情况
            classWorkfindAll: '',//班种
            isSelectedTPClass: {
                breakTime: '',
                typeClass: '',
                workingTime: '',
            },//选中日期的班次对象
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, },

    computed: {
        ...mapGetters([
            'userAssociate',
            'userInfo',
        ])
    },
    async mounted() {
        this.month = moment().format('yyyy-MM') + '-01 00:00:00';
        await this.getScheduleDataMonth(this.month);
        await this.getclassWork();
        this.$nextTick(async () => {
            if (this.isShowData) {
                // 获取当前选中的时间
                const formatedDate = this.$refs.calendars.formatedDate + ' 00:00:00';
                // 上一月 按钮绑定点击事件
                let prevBtn = document.querySelector('.el-calendar__button-group>.el-button-group>.el-button:nth-child(1)');
                prevBtn.addEventListener('click', e => {
                    const formatedDates = this.$refs.calendars.formatedDate + ' 00:00:00';
                    console.log('上一月', formatedDates);
                    this.getScheduleDataMonth(formatedDates);
                    this.selectedDay('', formatedDates);

                });
                // 下一月 按钮绑定点击事件
                let nextBtn = document.querySelector('.el-calendar__button-group>.el-button-group>.el-button:nth-child(3)');
                nextBtn.addEventListener('click', e => {
                    const formatedDates = this.$refs.calendars.formatedDate + ' 00:00:00';
                    // 第一次进入页面 加载数据
                    console.log('下一月', formatedDates);
                    this.getScheduleDataMonth(formatedDates);
                    this.selectedDay('', formatedDates);
                });
                //当前时间 今天
                let todayBtn = document.querySelector('.el-calendar__button-group>.el-button-group>.el-button:nth-child(2)');
                todayBtn.addEventListener('click', e => {
                    console.log('今天', formatedDate);
                    // 第一次进入页面 加载数据
                    this.getScheduleDataMonth(formatedDate);
                    this.selectedDay('', formatedDate);
                });

                console.log('formatedDate', formatedDate);
                await this.selectedDay('', formatedDate);
                await this.getAssociateFun();
            }
        })
    },
    methods: {
        // 修改 坐席信息 备注信息存储
        getAssociateFun() {
            console.log('this.isSelectedTPClass.typeClass', this.isSelectedTPClass.typeClass);
            const userObj = Object.assign({}, this.userAssociate);
            userObj.typeClass = this.isSelectedTPClass.typeClass;
            // 更新 坐席信息
            this.$store.commit('user/UPDATE_USERASSOCIATE', userObj);
        },
        // 修改日历上的日期
        getcalendarDate(tiems) {
            this.istitleDataMonth = moment(tiems).format('M');
            this.istitleDataDay = moment(tiems).format('D');
            this.pageLoading = false;
        },
        // 获取当前月的数据
        async getScheduleDataMonth(month) {
            // 请求初始化页面数据
            console.log('获取当月月份数据', month);
            let params = {
                classTime: month,
                seatName: this.userInfo.userName,
            };
            await this.$post.homePage.findMonthSeat(params).then((res) => {
                // console.log('res111111____________班表月数据', res);
                if (res.data.success) {
                    this.isShowData = true;
                    this.dataList = res.data.content;

                } else {
                    this.isShowData = false;
                    this.pageLoading = false;
                    this.$message.error('没有查到您的当月排班情况，请联系管理员！');
                }
            }, () => {
                this.pageLoading = false;
            });
        },
        // 获取班种类
        async getclassWork() {
            await this.$post.homePage.classWorkfindAll().then((res) => {
                if (res.data.success) {
                    this.classWorkfindAll = res.data.content;
                } else {
                    this.$message.error('班次数据为空，请联系管理员！');
                }
            });
        },
        // 选中当前日期 触发事件
        selectedDay(obj, value) {
            // console.log('选中当前日期', value);
            // 选中日期
            if (typeof value === 'string') {
                this.isSelectedDate = value;

            } else {
                this.isSelectedDate = value.day;
            }
            this.getcalendarDate(this.isSelectedDate);
            // 选中班次 typeClass
            let isSelectedTypeClass = '';
            // 获取当前人的当前班次
            const isnulldate = this.dataList.some((item) => {
                if (item.classTime === this.isSelectedDate) {
                    isSelectedTypeClass = item.typeClass;
                    return true;
                }
            });
            if (!isnulldate) {
                // this.$message.error('没有找到当前日期的排班数据，请联系管理员！');
                const nulldata = {
                    breakTime: '',
                    typeClass: '',
                    workingTime: '',
                };//选中日期的班次对象
                this.isSelectedTPClass = Object.assign({}, nulldata);
                return;
            }
            this.classWorkfindAll.some((item) => {
                if (item.typeClass === isSelectedTypeClass) {
                    this.isSelectedTPClass = Object.assign({}, item);
                    return true;
                }
            })
        }

    },
}
</script>
<style lang="scss">
.Schedule {
    .working {
        .el-calendar-table tr td:first-child {
            border-left: 1px solid #c6e3ff;
        }
        .el-calendar-table tr:first-child td {
            border-top: 1px solid #c6e3ff;
        }
        .el-calendar-table td {
            border-bottom: 1px solid #c6e3ff;
            border-right: 1px solid #c6e3ff;
        }
    }
    .el-calendar-table {
        .is-selected {
            color: #1989fa;
            .el-calendar-day {
                background-color: #c6e3ff;
                border-radius: 5px;
            }
        }
        .is-today {
            .el-calendar-day {
                color: #0080ff;
                .isdata .left {
                    border-radius: 10px;
                    background-color: #0080ff;
                    color: #fff;
                    padding: 2px;
                }
            }
        }
    }

    .el-calendar__header {
        padding: 2px 30px 5px 15px;
    }
    .el-calendar__body {
        padding: 2px 30px 10px;
        .el-calendar-table {
            thead > th {
                padding: 8px 0;
                color: #0c0c0c;
            }
        }
    }
    .el-calendar-table {
        .el-calendar-day {
            height: 100%;
            padding: 0;
            .isdata {
                line-height: 32px;
            }
            .right {
                margin-left: 5px;
            }
            .is-selected {
                color: #0b63bb;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.Schedule {
    .working {
        margin: 14px 0;
    }
    .workTop {
        display: flex;
        margin-bottom: 5px;
        margin-left: 30px;
        .worktopLeft {
            flex: 1;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            .workLeftItem {
                color: #fff;
                line-height: 28px;
            }
            .workItemBottom {
                color: #1989fa;
                margin-top: 4px;
            }
        }
        .worktopright {
            flex: 5;
            margin-left: 22px;
            font-size: 14px;
            .worktoprightItem {
                text-align: left;
                span:first {
                }
            }
        }
    }
}
</style>